8c:I[903690,["/chat-static/_next/static/chunks/435czfth5g2--.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2_n93kjda_fdl.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/30o49bxvrjjd6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1sq2o-tfpylmv.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3zzkx917psnab.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0it1pzxkmrfao.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3atxap5dfgc15.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-ecu9qsl6kfh.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gph80-et4xlm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/29nl-qtda_xxs.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/217iosoo3xo9p.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/34gqg8-10x0ii.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1e0kro_qu46oe.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1477qb8awntub.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1idcvvlvpraly.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3uqcu8e1bha9q.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0xl0120nvocrt.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1-appp6o5mjft.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0wq4l2acmg8jm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tb4isnwy1ped.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1x-_zdr_qor_a.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-zrgd218l_od.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3wbcbeex0k_cg.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tdl36x_a1l97.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt"],"ExplicitChatIdProvider"] 8d:I[838238,["/chat-static/_next/static/chunks/435czfth5g2--.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2_n93kjda_fdl.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/30o49bxvrjjd6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1sq2o-tfpylmv.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3zzkx917psnab.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0it1pzxkmrfao.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3atxap5dfgc15.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-ecu9qsl6kfh.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gph80-et4xlm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/29nl-qtda_xxs.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/217iosoo3xo9p.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/34gqg8-10x0ii.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1e0kro_qu46oe.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1477qb8awntub.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1idcvvlvpraly.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3uqcu8e1bha9q.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0xl0120nvocrt.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1-appp6o5mjft.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0wq4l2acmg8jm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tb4isnwy1ped.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1x-_zdr_qor_a.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-zrgd218l_od.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3wbcbeex0k_cg.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tdl36x_a1l97.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt"],"SWRDataProvider"] 8e:T992e,[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # LivePortrait animation *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/nwpistols-projects/v0-live-portrait-animation) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/E4PcTCCGYTz) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/nwpistols-projects/v0-live-portrait-animation](https://vercel.com/nwpistols-projects/v0-live-portrait-animation)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/E4PcTCCGYTz](https://v0.app/chat/projects/E4PcTCCGYTz)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/api/generate/route.ts" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const apiKey = process.env.HUGGINGFACE_API_KEY if (!apiKey) { return NextResponse.json( { error: "HuggingFace API key not configured. Please add HUGGINGFACE_API_KEY to your environment variables." }, { status: 500 }, ) } const formData = await request.formData() const sourceImage = formData.get("source_image") as File const drivingVideo = formData.get("driving_video") as File if (!sourceImage || !drivingVideo) { return NextResponse.json({ error: "Both source image and driving video are required" }, { status: 400 }) } console.log("[v0] Calling HuggingFace LivePortrait API...") // Call HuggingFace Inference API for LivePortrait // Using the KwaiVGI/LivePortrait space const hfFormData = new FormData() hfFormData.append("source_image", sourceImage) hfFormData.append("driving_video", drivingVideo) const response = await fetch("https://api-inference.huggingface.co/models/KwaiVGI/LivePortrait", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, }, body: hfFormData, }) if (!response.ok) { const errorText = await response.text() console.error("[v0] HuggingFace API error:", errorText) return NextResponse.json( { error: `HuggingFace API error: ${response.status} - ${errorText}` }, { status: response.status }, ) } // Get the video blob from the response const videoBlob = await response.blob() // Convert blob to base64 for client display const buffer = await videoBlob.arrayBuffer() const base64 = Buffer.from(buffer).toString("base64") const videoUrl = `data:video/mp4;base64,${base64}` console.log("[v0] Successfully generated talking avatar") return NextResponse.json({ videoUrl }) } catch (error) { console.error("[v0] Error in generate API:", error) return NextResponse.json( { error: error instanceof Error ? error.message : "An unexpected error occurred" }, { status: 500 }, ) } } [V0_FILE]css:file="app/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Upload, Sparkles, Video, ImageIcon, Play } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" export default function Home() { const [sourceImage, setSourceImage] = useState(null) const [drivingVideo, setDrivingVideo] = useState(null) const [isProcessing, setIsProcessing] = useState(false) const [result, setResult] = useState(null) const [error, setError] = useState(null) const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => setSourceImage(e.target?.result as string) reader.readAsDataURL(file) } } const handleVideoUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => setDrivingVideo(e.target?.result as string) reader.readAsDataURL(file) } } const handleGenerate = async () => { if (!sourceImage || !drivingVideo) return setIsProcessing(true) setError(null) setResult(null) try { // Convert base64 to File objects for API const imageBlob = await fetch(sourceImage).then((r) => r.blob()) const videoBlob = await fetch(drivingVideo).then((r) => r.blob()) const formData = new FormData() formData.append("source_image", imageBlob, "portrait.jpg") formData.append("driving_video", videoBlob, "driving.mp4") const response = await fetch("/api/generate", { method: "POST", body: formData, }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to generate avatar") } const data = await response.json() setResult(data.videoUrl) } catch (err) { console.error("[v0] Error generating avatar:", err) setError(err instanceof Error ? err.message : "An error occurred while generating the avatar") } finally { setIsProcessing(false) } } const examplePortraits = [ { src: "/mona-lisa-portrait.jpg", label: "Mona Lisa" }, { src: "/professional-woman-portrait.png", label: "Portrait 1" }, { src: "/man-with-beard-portrait.jpg", label: "Portrait 2" }, { src: "/young-woman-smiling-portrait.png", label: "Portrait 3" }, ] const exampleVideos = [ { src: "/person-talking-video-thumbnail.jpg", label: "Talking 1" }, { src: "/person-speaking-video-thumbnail.jpg", label: "Talking 2" }, { src: "/facial-expressions-video-thumbnail.jpg", label: "Expressions" }, ] return (

{/* Header */}

LivePortrait

AI-Powered Talking Avatar Generator

{/* Hero Section */}

Bring Your Photos to Life

Transform static portraits into realistic talking avatars. Upload a photo and a driving video to create stunning animated results with natural lip sync and facial expressions.

{/* Upload Section */}

{/* Source Portrait Upload */}

Step 1: Source Portrait

Upload any portrait image (any aspect ratio)

{sourceImage ? ( Source portrait

) : ( <>

Drop Image Here

Click to Upload

)}

{/* Example Portraits */}

Examples

{examplePortraits.map((example, idx) => ( ))}

{/* Driving Video Upload */}

Upload a video with facial movements (1:1 aspect ratio recommended)

{drivingVideo ? (

{/* Example Videos */}

Examples

{exampleVideos.map((example, idx) => ( ))}

{/* Tips Section */}

Tips for Best Results

• Focus on the head in your driving video, minimize shoulder movement
• Use a neutral expression in the first frame of your driving video
• Ensure good lighting in both the portrait and driving video
• Square (1:1) aspect ratio works best for driving videos

{/* Generate Button */}

{!sourceImage || !drivingVideo ? (

Upload both a portrait and driving video to continue

) : null}

{error && (

Error

{error}

)} {/* Result Section */} {result && (

Your Talking Avatar

)}

HuggingFace API Key Required

To enable video generation, add your HuggingFace API key as an environment variable named{" "} HUGGINGFACE_API_KEY. You can get a free API key from{" "} huggingface.co/settings/tokens . Add it in the Vars section of the sidebar.

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from 'react' import { cn } from '@/lib/utils' function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]jpg:file="public/animated-talking-avatar-result.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/tstP_laFWXL9CJNzLTGBbD/public/animated-talking-avatar-result.jpg" [V0_FILE]jpg:file="public/facial-expressions-video-thumbnail.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/zfrI_lHpm2WpuE45u9iQlY/public/facial-expressions-video-thumbnail.jpg" [V0_FILE]jpg:file="public/man-with-beard-portrait.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/rUFBZQ70k-oZW6p5oBVKVK/public/man-with-beard-portrait.jpg" [V0_FILE]jpg:file="public/mona-lisa-portrait.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/W-X8z3vVZg-j6YZzYW_NXP/public/mona-lisa-portrait.jpg" [V0_FILE]jpg:file="public/person-speaking-video-thumbnail.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/LnU4knhinxBBxtitZr4knm/public/person-speaking-video-thumbnail.jpg" [V0_FILE]jpg:file="public/person-talking-video-thumbnail.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/wy8hDFWN0UCHzPBGKBUUdh/public/person-talking-video-thumbnail.jpg" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" [V0_FILE]png:file="public/professional-woman-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/t_M2kY-SEsP1pmWWemoi4A/public/professional-woman-portrait.png" [V0_FILE]png:file="public/young-woman-smiling-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_NXDf8mDj2RgO2y1J0nQTR99ufcoy/OSn-7O9q118tEItJGkx4eg/public/young-woman-smiling-portrait.png"85:["$","$L8c",null,{"chatId":"uDFERes2LAs","children":["$","$L8d",null,{"data":{"@\"active-block\",\"uDFERes2LAs\",":{"id":"b_vK6usbAOGHp","messageId":"wz4bH0mPZ4NStqZPTHNJEQTetjQmAc3E","source":"$8e","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"liveportrait-app","type":"code-project","project":"liveportrait-app"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"uDFERes2LAs\",":false,"":null},"children":"$L8f"}]}]

Bring Your Photos to Life

Step 1: Source Portrait

Step 2: Driving Video

Tips for Best Results

Error

Your Talking Avatar

HuggingFace API Key Required

About

Tags

Share

About

Tags

Share

More Templates Like This